import React, { Suspense, lazy } from 'react';
import { Route, useRoutes } from 'react-router-dom'
import Layout from '../components/layout'
const Home = lazy(() => import('../views/home'))
const Login = lazy(() => import('../views/login'))
const Detail = lazy(() => import('../views/detail'))
const My = lazy(() => import('../views/my'))
const CollectList = lazy(() => import('../views/collectList'))
const Search = lazy(() => import('../views/search'))


const routes = [{
  path: '/',
  element: <Layout><Home></Home></Layout>
},
{
  path: '/login',
  element: <Login></Login>
},
{
  path: '/detail/:id',
  element: <Detail></Detail>
},{
  path: '/my',
  element: <Layout><My></My></Layout>
},{
  path: '/collect',
  element: <CollectList></CollectList>
},
{
  path: '/search',
  element: <Search></Search>
}]
const RouterView = () => useRoutes(routes);

const Router = () => {
  return (
    <Suspense>
      <RouterView></RouterView>
    </Suspense>  
  )
}

export default Router